<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>修改个人资料 - 社交网络</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        body {
            font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
            background-color: #f8f9fa;
            color: #333;
        }
        
        /* 顶部导航栏 */
        .main-header {
            background-color: white;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            position: sticky;
            top: 0;
            z-index: 1000;
        }
        
        .logo {
            font-size: 1.5rem;
            font-weight: 700;
            color: #0d6efd;
            text-decoration: none;
        }
        
        .search-bar {
            max-width: 400px;
            width: 100%;
        }
        
        .nav-icon {
            color: #6c757d;
            font-size: 1.25rem;
            margin-left: 1.5rem;
            position: relative;
            transition: color 0.2s ease;
        }
        
        .nav-icon:hover {
            color: #0d6efd;
        }
        
        .notification-badge {
            position: absolute;
            top: -5px;
            right: -8px;
            background-color: #dc3545;
            color: white;
            font-size: 0.7rem;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        /* 侧边栏导航 */
        .sidebar {
            background-color: white;
            border-right: 1px solid #eee;
            padding: 1.5rem 0;
            height: calc(100vh - 56px);
            position: sticky;
            top: 56px;
            overflow-y: auto;
        }
        
        .profile-summary {
            padding: 0 1.5rem 1.5rem;
            border-bottom: 1px solid #eee;
            margin-bottom: 1.5rem;
            text-align: center;
        }
        
        .sidebar-avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            object-fit: cover;
            margin: 0 auto 1rem;
            border: 3px solid #f1f5f9;
        }
        
        .sidebar-menu {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        
        .sidebar-menu li {
            margin-bottom: 0.25rem;
        }
        
        .sidebar-menu a {
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: 0.75rem 1.5rem;
            color: #495057;
            text-decoration: none;
            transition: all 0.2s ease;
        }
        
        .sidebar-menu a:hover, .sidebar-menu a.active {
            background-color: #e6f0ff;
            color: #0d6efd;
        }
        
        .sidebar-menu i {
            width: 20px;
            text-align: center;
        }
        
        .menu-section {
            font-size: 0.85rem;
            text-transform: uppercase;
            color: #6c757d;
            padding: 1rem 1.5rem 0.5rem;
            font-weight: 500;
        }
        
        /* 主内容区域 */
        .main-content {
            padding: 2rem;
        }
        
        .page-title {
            font-size: 1.75rem;
            font-weight: 700;
            margin-bottom: 1.5rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        /* 表单样式 */
        .profile-form-card {
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            padding: 2rem;
            margin-bottom: 2rem;
        }
        
        .form-section {
            margin-bottom: 2rem;
        }
        
        .section-heading {
            font-size: 1.25rem;
            font-weight: 600;
            margin-bottom: 1.5rem;
            padding-bottom: 0.75rem;
            border-bottom: 1px solid #eee;
        }
        
        .form-group {
            margin-bottom: 1.5rem;
        }
        
        .form-label {
            font-weight: 500;
            margin-bottom: 0.5rem;
            display: block;
        }
        
        .form-text {
            color: #6c757d;
            font-size: 0.875rem;
        }
        
        /* 头像和封面图上传区域 */
        .profile-media {
            margin-bottom: 2rem;
        }
        
        .media-upload-section {
            margin-bottom: 2rem;
        }
        
        .upload-container {
            position: relative;
            border-radius: 10px;
            overflow: hidden;
            margin-bottom: 1rem;
        }
        
        .cover-upload {
            height: 200px;
            background-color: #f1f5f9;
            position: relative;
        }
        
        .cover-preview {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .avatar-upload-container {
            position: relative;
            margin-top: -80px;
            margin-left: 2rem;
            z-index: 2;
            width: 150px;
        }
        
        .avatar-upload {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            border: 5px solid white;
            overflow: hidden;
            background-color: #e9ecef;
        }
        
        .avatar-preview {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .upload-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0,0,0,0.5);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.3s ease;
            cursor: pointer;
        }
        
        .upload-container:hover .upload-overlay,
        .avatar-upload:hover .upload-overlay {
            opacity: 1;
        }
        
        .upload-input {
            display: none;
        }
        
        /* 按钮样式 */
        .btn-primary {
            background-color: #0d6efd;
            border-color: #0d6efd;
        }
        
        .btn-outline-secondary {
            color: #6c757d;
            border-color: #6c757d;
        }
        
        .action-buttons {
            display: flex;
            gap: 1rem;
            justify-content: flex-end;
            margin-top: 2rem;
        }
        
        /* 兴趣标签样式 */
        .tags-container {
            display: flex;
            flex-wrap: wrap;
            gap: 0.75rem;
            margin-top: 1rem;
        }
        
        .tag-item {
            background-color: #e9ecef;
            border-radius: 20px;
            padding: 0.35rem 1rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.9rem;
        }
        
        .tag-remove {
            color: #6c757d;
            cursor: pointer;
            font-size: 1rem;
            transition: color 0.2s ease;
        }
        
        .tag-remove:hover {
            color: #dc3545;
        }
        
        .add-tag {
            background-color: #e6f0ff;
            color: #0d6efd;
            border: 1px dashed #0d6efd;
            cursor: pointer;
        }
        
        /* 响应式设计 */
        @media (max-width: 992px) {
            .sidebar {
                position: fixed;
                left: -250px;
                top: 56px;
                width: 250px;
                transition: left 0.3s ease;
                z-index: 999;
            }
            
            .sidebar.active {
                left: 0;
            }
            
            .mobile-menu-toggle {
                display: block !important;
            }
            
            .overlay {
                position: fixed;
                top: 56px;
                left: 0;
                right: 0;
                bottom: 0;
                background-color: rgba(0,0,0,0.5);
                z-index: 998;
                display: none;
            }
            
            .overlay.active {
                display: block;
            }
        }
        
        @media (max-width: 768px) {
            .search-bar {
                display: none;
            }
            
            .main-content {
                padding: 1rem;
            }
            
            .avatar-upload-container {
                margin-left: 1rem;
            }
        }
        
        @media (max-width: 576px) {
            .nav-icon {
                margin-left: 1rem;
                font-size: 1.1rem;
            }
            
            .page-title {
                font-size: 1.5rem;
                flex-direction: column;
                align-items: flex-start;
                gap: 1rem;
            }
            
            .action-buttons {
                width: 100%;
                flex-direction: column;
            }
            
            .action-buttons .btn {
                width: 100%;
            }
            
            .avatar-upload-container {
                width: 120px;
                margin-top: -60px;
            }
            
            .avatar-upload {
                width: 120px;
                height: 120px;
            }
            
            .cover-upload {
                height: 150px;
            }
        }
        
        .mobile-menu-toggle {
            display: none;
            background: none;
            border: none;
            font-size: 1.25rem;
            color: #6c757d;
            margin-right: 1rem;
        }
    </style>
</head>
<body>
    <!-- 顶部导航栏 -->
    <header class="main-header">
        <div class="container-fluid">
            <div class="d-flex justify-content-between align-items-center py-3">
                <div class="d-flex align-items-center">
                    <button class="mobile-menu-toggle">
                        <i class="fas fa-bars"></i>
                    </button>
                    <a href="#" class="logo">社交圈</a>
                </div>
                
                <div class="search-bar mx-auto">
                    <div class="input-group">
                        <input type="text" class="form-control rounded-pill border-right-0" placeholder="搜索...">
                        <button class="btn btn-outline-secondary rounded-pill border-left-0" type="button">
                            <i class="fas fa-search"></i>
                        </button>
                    </div>
                </div>
                
                <div class="d-flex align-items-center">
                    <a href="#" class="nav-icon">
                        <i class="fas fa-home"></i>
                    </a>
                    <a href="#" class="nav-icon">
                        <i class="fas fa-bell"></i>
                        <span class="notification-badge">3</span>
                    </a>
                    <a href="#" class="nav-icon">
                        <i class="fas fa-envelope"></i>
                        <span class="notification-badge">5</span>
                    </a>
                    <a href="#" class="nav-icon">
                        <i class="fas fa-cog"></i>
                    </a>
                    <a href="#" class="ms-3">
                        <img src="https://picsum.photos/id/64/100/100" alt="用户头像" class="rounded-circle" width="36" height="36">
                    </a>
                </div>
            </div>
        </div>
    </header>
    
    <!-- 移动端遮罩层 -->
    <div class="overlay"></div>
    
    <div class="container-fluid">
        <div class="row">
            <!-- 侧边栏导航 -->
            <aside class="col-lg-3 col-md-4 sidebar">
                <div class="profile-summary">
                    <img src="https://picsum.photos/id/64/200/200" alt="用户头像" class="sidebar-avatar">
                    <h3 class="mb-0">李明</h3>
                    <p class="text-muted mb-2">@limingdesign</p>
                    <a href="#" class="btn btn-primary btn-sm rounded-pill">查看资料</a>
                </div>
                
                <span class="menu-section">个人中心</span>
                <ul class="sidebar-menu">
                    <li><a href="#"><i class="fas fa-tachometer-alt"></i> 仪表盘</a></li>
                    <li><a href="#" class="active"><i class="fas fa-user"></i> 个人资料</a></li>
                    <li><a href="#"><i class="fas fa-image"></i> 我的相册</a></li>
                    <li><a href="#"><i class="fas fa-comment"></i> 我的动态</a></li>
                    <li><a href="#"><i class="fas fa-bookmark"></i> 我的收藏</a></li>
                    <li><a href="#"><i class="fas fa-heart"></i> 我的点赞</a></li>
                </ul>
                
                <span class="menu-section">社交</span>
                <ul class="sidebar-menu">
                    <li><a href="#"><i class="fas fa-users"></i> 我的好友 <span class="ms-auto badge bg-secondary">356</span></a></li>
                    <li><a href="#"><i class="fas fa-user-plus"></i> 好友请求 <span class="ms-auto badge bg-primary">8</span></a></li>
                    <li><a href="#"><i class="fas fa-star"></i> 关注的人 <span class="ms-auto badge bg-secondary">128</span></a></li>
                    <li><a href="#"><i class="fas fa-eye"></i> 访客记录 <span class="ms-auto badge bg-secondary">42</span></a></li>
                </ul>
                
                <span class="menu-section">设置</span>
                <ul class="sidebar-menu">
                    <li><a href="#"><i class="fas fa-cog"></i> 账号设置</a></li>
                    <li><a href="#"><i class="fas fa-bell"></i> 通知设置</a></li>
                    <li><a href="#"><i class="fas fa-shield-alt"></i> 隐私设置</a></li>
                    <li><a href="#"><i class="fas fa-question-circle"></i> 帮助中心</a></li>
                    <li><a href="#"><i class="fas fa-sign-out-alt text-danger"></i> 退出登录</a></li>
                </ul>
            </aside>
            
            <!-- 主内容区域 -->
            <main class="col-lg-9 col-md-8 main-content">
                <div class="page-title">
                    <span>修改个人资料</span>
                    <div>
                        <a href="#" class="btn btn-outline-secondary me-2">取消</a>
                        <button class="btn btn-primary">保存更改</button>
                    </div>
                </div>
                
                <form class="profile-form-card">
                    <!-- 头像和封面图上传 -->
                    <div class="profile-media">
                        <div class="media-upload-section">
                            <h4 class="form-label">封面照片</h4>
                            <div class="upload-container cover-upload">
                                <img src="https://picsum.photos/id/1015/1600/800" alt="封面照片预览" class="cover-preview">
                                <div class="upload-overlay">
                                    <i class="fas fa-camera fa-lg"></i>
                                    <span class="ms-2">更换封面</span>
                                </div>
                                <input type="file" class="upload-input" id="cover-upload">
                            </div>
                            <p class="form-text">推荐尺寸: 1600 × 400 像素，支持JPG、PNG格式</p>
                        </div>
                        
                        <div class="avatar-upload-container">
                            <div class="upload-container avatar-upload">
                                <img src="https://picsum.photos/id/64/200/200" alt="头像预览" class="avatar-preview">
                                <div class="upload-overlay">
                                    <i class="fas fa-camera"></i>
                                </div>
                                <input type="file" class="upload-input" id="avatar-upload">
                            </div>
                            <p class="form-text">推荐尺寸: 200 × 200 像素，支持JPG、PNG格式</p>
                        </div>
                    </div>
                    
                    <!-- 基本信息 -->
                    <div class="form-section">
                        <h3 class="section-heading">基本信息</h3>
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="fullname" class="form-label">姓名</label>
                                    <input type="text" class="form-control" id="fullname" value="李明">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="username" class="form-label">用户名</label>
                                    <div class="input-group">
                                        <span class="input-group-text">@</span>
                                        <input type="text" class="form-control" id="username" value="limingdesign">
                                    </div>
                                    <p class="form-text">用户名只能包含字母、数字和下划线，修改后需要重新登录</p>
                                </div>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label for="title" class="form-label">头衔/职位</label>
                            <input type="text" class="form-control" id="title" value="产品设计师 @ 科技创新公司">
                            <p class="form-text">显示在你的姓名下方，建议填写职业或身份信息</p>
                        </div>
                        
                        <div class="form-group">
                            <label for="bio" class="form-label">个人简介</label>
                            <textarea class="form-control" id="bio" rows="4">热爱设计与创意，专注于用户体验与交互设计。喜欢摄影、旅行和分享生活中的美好瞬间。欢迎交流设计理念与创意想法！</textarea>
                            <p class="form-text">简要介绍你自己，最多可输入200个字符</p>
                        </div>
                    </div>
                    
                    <!-- 联系方式 -->
                    <div class="form-section">
                        <h3 class="section-heading">联系方式</h3>
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="email" class="form-label">电子邮箱</label>
                                    <input type="email" class="form-control" id="email" value="liming@example.com">
                                    <p class="form-text">用于登录和接收系统通知</p>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="phone" class="form-label">手机号码</label>
                                    <input type="tel" class="form-control" id="phone" value="138****5678">
                                    <p class="form-text">仅自己可见，用于账号安全验证</p>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="website" class="form-label">个人网站</label>
                                    <input type="url" class="form-control" id="website" value="https://www.liming.design">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="location" class="form-label">所在地</label>
                                    <input type="text" class="form-control" id="location" value="北京市 朝阳区">
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 个人信息 -->
                    <div class="form-section">
                        <h3 class="section-heading">个人信息</h3>
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="birthday" class="form-label">生日</label>
                                    <input type="date" class="form-control" id="birthday" value="1990-05-15">
                                    <p class="form-text">你可以在隐私设置中控制谁能看到你的生日</p>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label">性别</label>
                                    <div class="d-flex gap-3">
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="gender" id="male" checked>
                                            <label class="form-check-label" for="male">男</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="gender" id="female">
                                            <label class="form-check-label" for="female">女</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="gender" id="secret">
                                            <label class="form-check-label" for="secret">保密</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label for="education" class="form-label">教育经历</label>
                            <input type="text" class="form-control" id="education" value="清华大学 设计学院">
                        </div>
                        
                        <div class="form-group">
                            <label for="work" class="form-label">工作单位</label>
                            <input type="text" class="form-control" id="work" value="科技创新公司">
                        </div>
                    </div>
                    
                    <!-- 兴趣爱好 -->
                    <div class="form-section">
                        <h3 class="section-heading">兴趣爱好</h3>
                        <p class="form-text mb-3">添加你的兴趣爱好，帮助我们为你推荐更多志同道合的朋友</p>
                        
                        <div class="tags-container">
                            <div class="tag-item">
                                <span>摄影</span>
                                <i class="fas fa-times tag-remove"></i>
                            </div>
                            <div class="tag-item">
                                <span>旅行</span>
                                <i class="fas fa-times tag-remove"></i>
                            </div>
                            <div class="tag-item">
                                <span>绘画</span>
                                <i class="fas fa-times tag-remove"></i>
                            </div>
                            <div class="tag-item">
                                <span>阅读</span>
                                <i class="fas fa-times tag-remove"></i>
                            </div>
                            <div class="tag-item">
                                <span>电影</span>
                                <i class="fas fa-times tag-remove"></i>
                            </div>
                            <div class="tag-item add-tag">
                                <i class="fas fa-plus"></i>
                                <span>添加兴趣</span>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 保存按钮 -->
                    <div class="action-buttons">
                        <button type="button" class="btn btn-outline-secondary">取消</button>
                        <button type="submit" class="btn btn-primary">保存更改</button>
                    </div>
                </form>
            </main>
        </div>
    </div>
    
    <!-- Bootstrap 5 JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 移动端菜单切换
            const mobileMenuToggle = document.querySelector('.mobile-menu-toggle');
            const sidebar = document.querySelector('.sidebar');
            const overlay = document.querySelector('.overlay');
            
            mobileMenuToggle.addEventListener('click', function() {
                sidebar.classList.toggle('active');
                overlay.classList.toggle('active');
            });
            
            overlay.addEventListener('click', function() {
                sidebar.classList.remove('active');
                overlay.classList.remove('active');
            });
            
            // 侧边栏菜单激活状态
            const menuItems = document.querySelectorAll('.sidebar-menu a');
            menuItems.forEach(item => {
                item.addEventListener('click', function(e) {
                    e.preventDefault();
                    
                    // 移除所有激活状态
                    menuItems.forEach(link => link.classList.remove('active'));
                    
                    // 添加当前激活状态
                    this.classList.add('active');
                    
                    // 移动端点击后关闭菜单
                    if (window.innerWidth <= 992) {
                        sidebar.classList.remove('active');
                        overlay.classList.remove('active');
                    }
                });
            });
            
            // 上传区域点击触发文件选择
            const uploadContainers = document.querySelectorAll('.upload-container');
            uploadContainers.forEach(container => {
                const overlay = container.querySelector('.upload-overlay');
                const input = container.querySelector('.upload-input');
                
                overlay.addEventListener('click', function() {
                    input.click();
                });
                
                input.addEventListener('change', function(e) {
                    // 这里可以添加预览图片的逻辑
                    if (this.files && this.files[0]) {
                        const reader = new FileReader();
                        reader.onload = function(e) {
                            const preview = container.querySelector('.cover-preview, .avatar-preview');
                            if (preview) {
                                preview.src = e.target.result;
                            }
                        }
                        reader.readAsDataURL(this.files[0]);
                    }
                });
            });
            
            // 兴趣标签移除功能
            const tagRemoves = document.querySelectorAll('.tag-remove');
            tagRemoves.forEach(remove => {
                remove.addEventListener('click', function() {
                    this.closest('.tag-item').remove();
                });
            });
            
            // 添加兴趣标签功能
            const addTagBtn = document.querySelector('.add-tag');
            addTagBtn.addEventListener('click', function() {
                const tagText = prompt('请输入兴趣爱好:');
                if (tagText && tagText.trim() !== '') {
                    const tagsContainer = document.querySelector('.tags-container');
                    const newTag = document.createElement('div');
                    newTag.className = 'tag-item';
                    newTag.innerHTML = `
                        <span>${tagText}</span>
                        <i class="fas fa-times tag-remove"></i>
                    `;
                    
                    // 添加删除功能
                    newTag.querySelector('.tag-remove').addEventListener('click', function() {
                        newTag.remove();
                    });
                    
                    // 插入到添加按钮前
                    tagsContainer.insertBefore(newTag, addTagBtn);
                }
            });
            
            // 表单提交处理
            const profileForm = document.querySelector('form');
            profileForm.addEventListener('submit', function(e) {
                e.preventDefault();
                // 这里可以添加表单验证和提交逻辑
                alert('个人资料已保存成功！');
            });
        });
    </script>
</body>
</html>

